<template>
    <div class="topLine">
        <div v-for="item in data" :key="item.name" class="lineBox">
            <!-- <img class="warn" src="../../../assets/images/tishi.png"/> -->
            <i class="el-icon-warning warn"></i>
            <span class="titles">{{ item.name }}</span>
            <div class="lineInfo">
                <span class="info-num">{{ item.num }}</span>
                <span v-if="item.name!='在进行任务'" class="info-txt">日同比 <span :class="item.type==1?'info-color1':'info-color2'"><i :class="item.type==1?'el-icon-top':'el-icon-bottom'"></i>{{ item.bili }}%</span></span>
                <img class="goup" v-if="item.type==1" src="../../../assets/images/goup.png"/>
                <img class="goup" v-else src="../../../assets/images/drop.png"/>
            </div>
        </div>
    </div>
</template>
<script>
  export  default {
    name:"topIndex",
    props:{
      indexCount:Array,
    },
    data() {
      return {
         data:[],
      }
    },
    watch:{
      indexCount: {
        handler(newValue,oldValue){
        this.init()
        },
        deep: true
      }
    },
    mounted(){
        this.init()
    },
    methods: {
      init(){
         this.data=this.indexCount
      }
    }
  }
  
  </script>
  
  <style scoped lang="scss">
     .topLine{
        display: flex;
        align-items: center;
        justify-content: space-between;
        
     }
     .titles{
         font-size: 14px;color: #818e96;line-height: 40px;font-weight: 550;
      }
     .lineBox{
        width: 30%;
        display: flex;
        flex-direction: column;
        padding: 15px 10px 30px 20px;
        background-color: #fff;
     }
     .warn{
        margin-left: 93%;
        color: #d2d6d9;
     }
     .lineInfo{
        display: flex;
        align-items:center;
        justify-content: space-between;
        .info-num{
            font-size: 22px;
            font-weight: bold;
        }
        .info-txt{
            font-size: 13px;
            color: #687379;
            .info-color1{
               color:#18bea1;
            }
            .info-color2{
               color:#e14b44;
            }
        }
        .goup{
           width: 80px;
           height:50px;
           margin-right: 10px;
        }
     }
     
     
  </style>
  